I included Header as well for wrapping Router tag.

Header.js

import { Link } from "react-router-dom";

const Header= () => {
  return (
    <nav className="navbar">
        <ul className="navbar-items">
          <li className="navbar-items_item">
            <Link to="/">Home</Link>
          </li>
          <li className="navbar-items_item">
            <Link to="/about">About</Link>
          </li>
          <li className="navbar-items_item">
            <Link to="/user">User</Link>
          </li>
        </ul>
      </nav>
  );
};

export default Header;

App.js

import React, { Component } from "react";
import { Routes, Route } from "react-router-dom";
import Header from "./components/Header/index";
import Footer from "./components/Footer/index";
import "../styles/style.scss";

const Home = () => <div>Home</div>;
const About = () => <div>About</div>;
const User = () => <div>User</div>;

class App extends Component {
  render() {
    return (
      <div className="App">
          <header>
            <Header />
          </header>
          <main>
            <Routes>
              <Route exact path="/" element={<Home />} />
              <Route exact path="/about" element={<About />} />
              <Route exact path="/user" element={<User />} />
            </Routes>
          </main>
        <footer>
          <Footer />
        </footer>
      </div>
    );
  }
}

export default App;

index.js

import { BrowserRouter as Router } from "react-router-dom";
import ReactDOM from "react-dom/client";
import App from "./modules/App";
import reportWebVitals from "./reportWebVitals";

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(
  <React.StrictMode>
    <Router>
      <App />
    </Router>
  </React.StrictMode>
);

reportWebVitals();